<!doctype html>
<html>

	<head>
		<meta charset="utf-8">
		<title>填写核对购物信息</title>
		<link rel="stylesheet" type="text/css" href="css/shangpingoumai.css">
		<script src="js/jquery-1.8.3.min.js"></script>
		<script src="js/city.js/cityJson.js"></script>
		<script src="js/city.js/citySet.js"></script>
		<script src="js/city.js/Popt.js"></script>
		<link rel="stylesheet" href="../res/layui/css/layui.css" media="all">
		<script src="../res/layui/layui.js"></script>
	</head>

	<body>
		<!--全部开始-->
		<div class="tianxiehedui">
			<!--标题-->
			<div class="rzhdndgw">温馨提示：请认真核对您的购物信息</div>
			<!--收货人信息-->
			<div class="shouhurxl clastyo" >
				<div class="shouhurxl1">
					<em>收货人信息</em>
					<a href="#" class="chgeb">修改</a>
				</div>
				<div class="shouhurxl2" id="yue">
					<!--<span>王莉</span>
					<span>山东省	济南市	天桥区历山北路黄台电子商务产业园1020</span>
					<span><em>电话：</em><em>15554465535</em></span>-->
				</div>
			</div>
			<!--点击修改会出现这个选择框-->
			<div class="changepc" id="sheia">
				<!--以前的旧地址-->
			<!--	<div class="tongyongdizhi">
					<input type="radio" name="adressa" style=" float:left; display:block; width:13px; height:13px; margin-top:9px">
					<span>王莉</span>
					<span>山东省	济南市	天桥区历山北路黄台电子商务产业园1020</span>
					<span><em>电话：</em><em>15554465535</em></span>
					<a href="#">删除</a>
				</div>
				<!--添加新地址-->
				<!--<div class="dandudizhi">
					<input type="radio" name="adressa" class="adressa" style=" float:left; display:block; width:13px; height:13px; margin-top:9px">
					<span>使用新地址</span>
				</div>-->
				<!--添加新地址-->
				<!--<div class="opcaty1">
					<div class="opcaty2">
						<em>收货人姓名：</em>
						<input style="float:left; border:1px solid #bbb; box-shadow:none; height:28px; font-size:12px; text-indent:6px" type="text" class="shuru" />

					</div>-->
					<!--<div class="opcaty2">
						<em>所在的地区：</em>
						<input type="text" id="city" value="点击选择地区" / style=" height:28px; font-size:12px; border:1px solid #bbb; float:left">
						<script type="text/javascript">
							$("#city").click(function(e) {
								SelCity(this, e);
							});
						</script>
					</div>-->
					<!--<div class="opcaty2">
						<em>详细的地址：</em>
						<input style="float:left; border:1px solid #bbb; box-shadow:none; height:28px; font-size:12px; text-indent:6px; width:488px" type="text" class="shuru" placeholder="请填写真实地址，不需要重复填写所在地区" required />

					</div>
					<div class="opcaty2">
						<em>联系的电话：</em>
						<input style="float:left; border:1px solid #bbb; box-shadow:none; height:28px; font-size:12px; text-indent:6px" type="text" class="shuru" />

					</div>
					<a href="#" class="bcshrxopl">保存收货人信息</a>
				</div>-->
				<!--新地址结束-->
				<!--添加新地址结束-->
			</div>
			<script>
				$(function() {
					$(".chgeb").click(function() {
						$(".changepc").css({
							display: "block"
						});
						$(".clastyo").css({
							display: "none"
						})
					})
					$(".bcshrxopl").click(function() {
						$(".changepc").css({
							display: "none"
						});
						$(".clastyo").css({
							display: "block"
						});
						$(".opcaty1").css({
							display: "none"
						})
					})
					$(".adressa").click(function() {
						$(".opcaty1").css({
							display: "block"
						})
					})
				})
			</script>
			<!--这个选择框结束-->
			<!--收货人信息结束-->
			<!--支付方式-->
			<div class="shouhurxl">
				<h3>支付方式</h3>
				<div class="zhifufangsj1">
					<span>在线支付</span>
				</div>
			</div>
			<!--支付方式结束-->
			<!--发票信息-->
			<div class="shouhurxl shouhurxl13">
				<div class="shouhurxl1 shouhurxl12">
					<em>发票信息</em>
					<a href="#">修改</a>
				</div>
				<div class="shouhurxl2">
					<span>普通发票 个人 食品</span>
				</div>
				<script>
					$(function() {
						$(".shouhurxl12 a").click(function() {
							$(".shouhurxl13").css({
								display: "none"
							});
							$(".xgfpxo").css({
								display: "block"
							});
							$(".fapiaowr3").css({
								display: "none"
							})
						})
						$(".godieba").click(function() {
							$(".fapiaowr3").css({
								display: "block"
							})
						})
						$(".worilrgo").click(function() {
							$(".xgfpxo").css({
								display: "none"
							});
							$(".shouhurxl13").css({
								display: "block"
							})
						})

					})
				</script>
			</div>
			<!--修改发票信息-->
			<div class="xgfpxo">
				<div class="fapiaowr">
					<span>发票信息</span>
				</div>
				<!--众多发票的信息-->
				
				<div class="fapiaowr fapiaowr1">
					<input type="radio" name="fapl" style=" float:left; display:block; width:13px; height:13px; margin-top:9px"><span>普通发票</span>
					<a href="#">删除</a>
				</div>
				<div class="fapiaowr fapiaowr1">
					<input type="radio" name="fapl" style=" float:left; display:block; width:13px; height:13px; margin-top:9px"><span>普通发票</span>
					<a href="#">删除</a>
				</div>
				<div class="fapiaowr fapiaowr1">
					<input type="radio" name="fapl" style=" float:left; display:block; width:13px; height:13px; margin-top:9px"><span>普通发票</span>
					<a href="#">删除</a>
				</div>
				<!--发票结束-->
				<!--使用新的发票信息-->
				<div class="fapiaowr fapiaowr1">
					<input type="radio" name="fapl" style=" float:left; display:block; width:13px; height:13px; margin-top:9px" class="godieba"><span>使用新的发票信息</span>
					<!--点击后这个块又出现-->
					<div class="fapiaowr fapiaowr3">
						<div class="fapiaowr">
							<em style=" float:left; font-size:14px; display:block; color:#333; line-height:30px">发票类型：</em>
							<input type="radio" name="fapla" checked style=" float:left; display:block; width:13px; height:13px; margin-top:8px">
							<span style=" display:block; float:left; padding-left:6px; line-height:30px; font-size:14px; color:#333">普通发票</span>
						</div>
						<div class="fapiaowr">
							<em style=" float:left; font-size:14px; display:block; color:#333; line-height:30px">发票抬头：</em>
							<select style=" float:left; display:block; width:100px; border:1px solid #bbb; height:28px">
								<option value="person">个人</option>
								<option value="company">单位</option>
							</select>
							<input style="float:left; border:1px solid #bbb; box-shadow:none; height:26px; font-size:12px; text-indent:6px; width:160px; margin-left:6px" type="text" class="shuru" placeholder="单位名称" required />
						</div>
						<div class="fapiaowr">
							<em style=" float:left; font-size:14px; display:block; color:#333; line-height:30px">发票内容：</em>
							<select style=" float:left; display:block; width:100px; border:1px solid #bbb; height:28px">
								<option value="person">明细</option>
								<option value="company">酒</option>
								<option value="company">玩具</option>
								<option value="company">汽车</option>
								<option value="company">家电</option>
							</select>
						</div>

					</div>
					<div style=" width:100%; height:auto ; overflow:hidden">
						<a href="#" style=" display:block; padding-left:20px; padding-right:20px; line-height:40px; color:#fff; font-size:14px; margin-top:10px; margin-bottom:10px" class="worilrgo bcfpxxnm">保存发票信息</a>
						<a href="#" style=" display:block; padding-left:20px; padding-right:20px; line-height:40px; color:#fff; font-size:14px; margin-top:10px; margin-bottom:10px; margin-left:10px" class="worilrgo byynm">不需要发票</a>
					</div>
					<!--这个块结束-->
				</div>
			</div>
			<!--发票信息结束-->
			<!--商品清单-->
			<div class="shouhurxl">
				<!--一条商品信息开始-->
				<div class="xxpop1" style="background:rgba(255,153,0,0.1); padding-bottom:6px" id="qwe">

					<!--  <div class="xxpop2" style=" width:630px">
            					<span>商品</span>
                                <a href="#"><p style=" line-height:20px"><img src="img/img02.jpg"/>&nbsp;中华老字号东阿乌鸡白凤丸300g</p></a>
            </div>
            <div class="xxpop2">
            					<span>单价(元)</span>
                                <p>1000</p>
            </div>
            <div class="xxpop2">
            					<span>数量</span>
                                <p>1</p>
            </div>
            <div class="xxpop2">
            					<span>小计(元)</span>
                                <p>1000</p>
            </div>-->
				</div>
				<!--买家留言-->
				<div class="maijiayouhuayue">
					<em style=" width:90px; text-align:right">买家留言：</em>
					<textarea style=" line-height:20px; font-size:14px; color:#111; border:1px solid #bbb; width:1000px; box-shadow:none" placeholder="选填：对本次交易的说明（建议填写已经和商家达成一致的说明）"></textarea>
				</div>
				<!--商品合计-->
				<div class="shouhurxlm">
					<ul>
						<li>
							<em><s>0</s>元</em>
							<em>运费：</em>
						</li>
						<li>
							<em id="sum"><s>95</s>元</em>
							<em>商品金额：</em>
						</li>
						<li>
							<em id="su"><s>95</s>元</em>
							<em>本店合计：</em>
						</li>
					</ul>
					<!--订单总金额-->
					
					<script>
						$(function() {
							$(".dianyidian").click(function() {
								$(".zgykskbj").slideToggle()
							})
						})
					</script>
					<!--支付密码结束-->
				</div>
				<!--一条商品信息结束-->
			</div>
			<!--商品清单结束-->
			<a href="#" class="tijiaodingdang56"  lay-submit lay-filter="add" id='add'>提交订单</a>

		</div>
		<script type="text/javascript">
		

			function dingdan(dd) {
				//				var data = dd.data;
				//
				//				for(var i = 0; i < data.length; i++) {
				//					sum += data[i].price;
				//				}
//				console.log(dd)
				return "<div class='xxpop2' style=' width:630px'>" +
					"<span>商品</span>" +
					" <a href='#'><p style=' line-height:20px'><img src='images/" + dd.picUrl + "'/>&nbsp;" + dd.pname + "</p></a>" +
					" </div>" +
					" <div class='xxpop2'>" +
					"					<span>单价</span>" +
					"                     <p>" + dd.price + "</p>" +
					" </div>" +
					" <div class='xxpop2'>" +
					"				<span>数量</span>" +
					"                  <p>1</p>" +
					"</div>+"
				    "<div class='xxpop2'>" +
				    "	<span>订单编号</span>" +
				"  <p>1</p>" +
				"</div>"
			}
			function dizhi(dz){
				return"<span>"+dz.username+"</span>"+
					"<span>"+dz.sdizi+"</span>"+
					"<span><em>电话：</em><em>" + dz.useriphone + "</em></span>"
			}
			function xiugaidizi(xgdz){
				return"<div class='tongyongdizhi'>"+
					"<input type='radio' name='adressa' style=' float:left; display:block; width:13px; height:13px; margin-top:9px'>"+
					"<span>"+xgdz.username+"</span>"+
					"<span>"+xgdz.sdizi+"</span>"+
					"<span><em>" + xgdz.useriphone + "</em></span>"+
					"<a href='#?SE=xgdz.sid' class='simpleCart_empty' lay-submit lay-filter='wo_qu'>删除</a>"+
				"</div>"+
			"	<div class='opcaty1'>"+
					"<div class='opcaty2'>"+
						"<em>收货人姓名：</em>"+
						"<input style='float:left; border:1px solid #bbb; box-shadow:none; height:28px; font-size:12px; text-indent:6px' type='text' class='shuru' />"+

					"</div>"+
					"<div class='opcaty2'>"+
					"	<em>所在的地区：</em>"+
					"	<input type='text' id='city' value='点击选择地区' / style=' height:28px; font-size:12px; border:1px solid #bbb; float:left'>"+
					"</div>"+
					"<div class='opcaty2'>"+
						"<em>详细的地址：</em>"+
						"<input style='float:left; border:1px solid #bbb; box-shadow:none; height:28px; font-size:12px; text-indent:6px; width:488px' type='text' class='shuru' placeholder='请填写真实地址，不需要重复填写所在地区' required />"+

					"</div>"+
					"<div class='opcaty2'>"+
					"	<em>联系的电话：</em>"+
					"	<input style='float:left; border:1px solid #bbb; box-shadow:none; height:28px; font-size:12px; text-indent:6px' type='text' class='shuru' />"+

					"</div>"+
					"<a href='#' class='bcshrxopl'>保存收货人信息</a>"+
				"</div>"
			}
			var sum=0;
			var indexOfAddForm;
			//编辑form的弹窗索引
			var indexOfEditForm;
			layui.use(['table', 'layer', 'laydate', 'form'], function() {
				var table = layui.table;
				var layer = layui.layer;
				var form = layui.form;
				var laydate = layui.laydate;
				var $ = layui.$;
				$.post("/g4/carproduct/selectall", {}, function(res) {
					
					if(res.code === '0') {
						for(var i = 0; i < res.data.length; i++) {
							sum+=res.data[i].price;
							console.log(sum);
							$("#sum").html(sum)
							$("#su").html(sum)
							$("#sukl").html(sum)
							
							var code = dingdan(res.data[i]);
							$("#qwe").append($(code));
						}
					} else {
						layer.msg("获取失败")
					}
				}, 'json');
				$.post("/g4/dz/list", {}, function(res) {
					
					if(res.code === '0') {
						
							var code = dizhi(res.data[0]);
							var aiyou = xiugaidizi(res.data[0]);
							$("#yue").append($(code));
							
					
					} else {
						layer.msg("获取失败")
					}
				}, 'json');
				$.post("/g4/dz/list", {}, function(res) {
					
					if(res.code === '0') {
						for(var i = 0; i < res.data.length; i++) {
							var code = dizhi(res.data[i]);
							var aiyou = xiugaidizi(res.data[i])
							$("#sheia").append($(aiyou));
						}
					} else {
						layer.msg("获取失败")
					}
				}, 'json');
				 form.on('submit(add)', function(data) {
						layer.confirm('请确认支付', function(index) {
							 /* 定义json对象 */		
						    var addCartDto = {
									           cartProIds:[1,2],
						    		           totalMoney:99.9
						    		         }
							/* json对象转字符串 */
							var str = JSON.stringify(addCartDto)
							
							
							/* 发送请求    前端传json字符串      后端用@RequestBody来接收   */
						    $.ajax({
					　　　　　　　　url:"http://localhost:8080/g4/order/add",
					　　　　　　　　type:"POST",
					               /*请求参数为json字符串*/ 
					　　　　　　　　data:str,
					               /*设置内容类型为json （必填填写的内容，这样才可以用@RequestBody接收）*/
					　　　　　　　　contentType:"application/json;charset=utf-8",
					　　　　　　　　success:function(data){
					　　　　　　　　　　if(data.code === '0') {
											layer.msg('成功');
										
										} else {
											layer.msg('失败');
										}
					　　　　　　　　}
				　　　　        });
							
						
							
							layer.close(index);
						});
						
						
						
						
					}); 
				 
				//获取url参数的方法
					function getQueryVariable(variable) {
						var query = window.location.search.substring(1);
						var vars = query.split("&");
						for (var i = 0; i < vars.length; i++) {
							var pair = vars[i].split("=");
							if (pair[0] == variable) {
								return decodeURIComponent(pair[1]);
							}
						}
						return (false);
					}
					//测试获取url参数
					var str = getQueryVariable("SE");

					
					form.on('submit(wo_qu)', function(data) {
					layer.confirm('真的删除吗？', function(index) {
						var url = "/g4/dz/shanchu";
						$.post(url,{}, function(res) {
							if (res.code == '0') {
								layer.msg("已删除")
								
							} else {
								layer.msg("删除失败")
							}
						}, 'json')

						layer.close(index);

						return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
					});
				});

					 form.on('submit(wo_qu)', function(data) {
							
							layer.confirm('真的删除行么', function(index) {
								var url = "/g4/dz/shanchu";
		                         var dt = {
		                        		 sid:str
								}
								$.post(url, dt, function(res) {
									if (res.code == '0') {
										layer.msg('删除成功');
							
									} else {
										layer.msg('删除失败');
									}
								}, 'json')
							})
								});
					 });
		
			
			
			
		</script>
	</body>

</html>